<template>
  <div class="wrap">
    <div class="head">
      <img src="/static/challenge/weekChallenge.png" >
      <div class="tag">每周一更新</div>
    </div>
    <div class="list">
      <img :src="IMGHEAD+item.image" v-for="(item,index) in list" :key="index" @click="start(item)">
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data(){
    return{
      list:[],
    }
  },
  computed:{
    ...mapState(["IMGHEAD"]),
  },
  methods:{
    getList(){
      this.fly.post('weekChallenge/getWeekTitleList').then(res=>{
        console.log(res)
        this.list = res.data.Result;
      })
    },
    start(item){
      if(item.isWeekFinish==0){
        this.$router.push(`/pages/weekChallenge/weekIndex?id=${item.id}`);
      }else{
        wx.showToast({title:"大佬别刷我了,刷下面的",icon:"none"});
      }
    },
  },
  onShow(){
    this.getList();
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  width: 100%;
  height: 100%;
  background: #f4f3f3;
}
.head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  height: 217rpx;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url("");
  &>img {
    width: 284rpx;
    height: 70rpx;
    display: block;
    margin: 45rpx auto 24rpx auto;
  }
  .tag{
    font-size: 30rpx;
    color:#fff;
  }
}
.list{
  margin-top: 38rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  width: 100%;
  img{
    width: 100%;
    height: 250rpx;
    border-radius: 8rpx;
    border:8rpx solid #fff;
    margin-bottom: 18rpx;
    box-sizing: border-box;
  }
}

</style>
